<script setup lang="ts">
import type { Header } from 'element-plus/es/components/table-v2/src/components/index.mjs';
import {onMounted, ref,reactive} from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import AllClass from '@/views/Pu/AllClass.vue'
import MoreAudio from '@/views/Pu/MoreAudio.vue'
// 获取id引入的
// import { useRoute } from 'vue-router';
// 合集课程API
import {CollectionCourse} from '@/api/Pu/qianTaiPu'
import {GetAllCourse} from '@/api/SearchList'

 //课程详情中 和  更多 <button>     --->Ta的课程  和  Ta的合集课程
   import {TeacherStore} from '@/stores/qianTaiPu/teacherDetailData'

//课程详情中的Ta的课程（同SearchList中课程一样）
// import {SearchList} from '@/stores/frontData/SearchList'
// import { MoreStore } from '@/stores/qianTaiPu/MoreButton';
import router from '@/router';
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

// 获取id
// const route=useRoute()

// 获取store的数据
const store=TeacherStore()
console.log(store.Teaid);


// 初始化
onMounted(()=>{
 initData()
})

  // 查询课程的内容
  const courseContent=reactive<any>({
      limit:"5",
      page:1,
      thematicId:'',
      year:''
  })

const initData=()=>{

   // 主页下的合集课程
CollectionCourse(store.Teaid).then((resp)=>{
// CollectionCourse(1).then((resp)=>{
   // console.log(resp.data.data);
   store.arrClass=resp.data.data 
})

// 课程详情下的Ta的课程
GetAllCourse(courseContent).then((resp)=>{
   console.log(resp);
   store.MoreClass=resp.data.data
   
})

}

</script>
<template>
    <div>
    <!--文字 -->
    <div class="AllClass">
         <div class="Notext">
         <h3 style="color: black;">Ta的合集课程</h3>
      </div>
      <!-- 视频栏 -->
      <template v-for="(item,index) in store.arrClass">
      <div class="ClassShipin"  v-if="index < 2">
      <div class="RightShipin" >
         <div class="demo-image">
         <el-image style="width: 280px; height: 150px" :src="item.thematicImg" fit="cotain" />
         <div class="blankDiv">
           <p class="NUM">1</p> 
            <span class="iconfont icon-navicon-jkhd span1"></span>
           <p class="buttom"><span class="iconfont icon-navicon-jkhd"></span></p>
         </div>
         </div>
         <div class="text">
         <!-- <span>合集·视频后期</span> -->
         <span>{{item.thematicName}}</span>
         <span class="Date">4-10</span>
      </div>
      </div>
         </div>
      </template>
        </div>
        <div class="Class">
            <h3>Ta的课程</h3>
            <div class="ShipinA">
        <RouterLink to="/FrontFreeClass" v-for="item in store.MoreClass">
          <MoreAudio :price="item.price"  :teacherName="item.teacherName" :enlistsNum="item.enlistsNum" :class_name="item.className" :url="item.img"></MoreAudio> 
        </RouterLink>
      </div>
    </div>
        </div>
 </template>

<style scoped>
*{
 margin: 0;
 padding: 0;  
 list-style: none ;
}
.AllClass{
   margin-top: 30px;
   margin-left: 20px;
   height: 300px;
   border: 1px solid black;
}

/* 视频合集 */
.Notext{
   display: flex;
   height:40px;
   align-items: center;
   margin-top: 10px;
}
.Notext h3{
   margin-left: 20px;
}
.Date{
   /* display: inline-block; */
   margin-left: 130px;
   font-size: 13px;
}
.demo-image{
   padding: 10px;
}
.ClassShipin{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 300px;
}
.RightShipin{
   width: 280px;
   height: 150px;
   position: relative;
   left: -255px;
   margin: 10px 0px 40px 0px;
}
.blankDiv{
   width: 100px;
   height: 150px;
   position: absolute;
   top: 0;
   right: 0;
   background-color: rgba(0, 0, 0, 0.5);
}
.NUM{
font-size: 20px;
color: white;
text-align: center;
margin-top: 40px;
}
.span1{
font-size: 25px;
color: white;
display: block;
}
.buttom >span{
   position: relative;
   top: 25px;
   font-size: 25px;
   left: 30px;
   color: white;
}
.demo-image{
   padding: 0 !important;
}
.Class{
    margin-top: 30px;
    margin-left: 20px;
    border: 1px solid blue;
}
.Class h3{
   display: flex;
    margin-top: 10px;
    margin-left: 20px;
}

</style>